<template>
  <div id="map"></div>
  <SeachCard />
  <CityWeather />
  <ToolsCard />
  <DownloadCard />
  <UserCard />
  <!-- <router-view></router-view> -->
</template>

<script setup>
import { onMounted, provide, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

import SeachCard from './components/SeachCard.vue'
import CityWeather from './components/CityWeather.vue'
import ToolsCard from './components/ToolsCard.vue'
import DownloadCard from './components/DownloadCard.vue'
import UserCard from './components/UserCard.vue'

const key = 'a583c9fd4d5c17bb043746d74b6c90d4'
const safeKey = 'f601e7cab4f21b4f13b9cfe070f58e07'

let map = ref(null)
let AMap = ref(null)
provide('map', map)
provide('AMap', AMap)

onMounted(async () => {
  window.window._AMapSecurityConfig = {
    securityJsCode: safeKey,
  }
  AMap.value = await AMapLoader.load({
    key: key,
    version: '2.0',
    plugins: [
      'AMap.Scale',
      'AMap.ControlBar',
      'AMap.ToolBar',
      'AMap.MouseTool',
      'AMap.Geocoder',
      'AMap.AutoComplete',
      'AMap.CitySearch',
      'AMap.Weather',
    ],
  })

  map.value = new AMap.value.Map('map', {
    zoom: 12,
    center: [104.065053, 30.656603],
  })
  map.value.addControl(new AMap.value.Scale())
  map.value.addControl(new AMap.value.ControlBar({ position: { right: '0px', bottom: '100px' } }))
  map.value.addControl(new AMap.value.ToolBar({ position: { right: '30px', bottom: '20px' } }))
})
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
